<template>
  <div class="container">

    <!-- Metrics Summary Section -->
    <section class="metrics">
      <div class="metric">
        <h2>车辆总数</h2>
        <p>{{ vehicleCount }}</p>
      </div>
      <div class="metric">
        <h2>车主总数</h2>
        <p>{{ userCount }}</p>
      </div>
      <div class="metric">
        <h2>本月违规统计</h2>
        <p>{{ violationCount }}</p>
        <small>自从上月以来: +{{ violationPercentage }}%</small>
      </div>
      <div class="metric">
        <h2>异常车辆</h2>
        <p>0</p>
        <small>自从上周以来: +0%</small>
      </div>
    </section>

    <!-- Charts Section -->
    <section class="charts">
      <div class="chart">
        <h3>学院违规统计 TOP5</h3>
        <div class="chart-placeholder">[图表内容]</div>
      </div>
      <div class="chart">
        <h3>违规类型统计 TOP5</h3>
        <div class="chart-placeholder">[图表内容]</div>
      </div>
      <div class="chart">
        <h3>违章区域统计 TOP5</h3>
        <div class="chart-placeholder">[图表内容]</div>
      </div>
    </section>

    <!-- Overview Section -->
    <section class="overview">
      <h3>出入校概览</h3>
      <div class="chart-placeholder">[折线图内容]</div>
    </section>

    <!-- Footer -->
    <footer class="footer">
      <p>© 2024 WeRide. All rights reserved.</p>
    </footer>
  </div>
</template>

<script>
import { listEbike } from '@/api/vehicle/ebike';
import { listUser } from '@/api/system/user';
import { getMonthlyViolationCounts } from "@/api/violation/collectionRecord";

export default {
  data() {
    return {
      vehicleCount: 0,
      userCount: 0,
      violationCount: 0,
      violationPercentage: 0,
    };
  },
  mounted() {
    this.fetchVehicleList();
    this.fetchUserList();
    this.fetchViolationData();
  },
  methods: {
    async fetchVehicleList() {
      try {
        const response = await listEbike();
        this.vehicleCount = response.total;
      } catch (error) {
        console.error('获取车辆列表失败', error);
      }
    },
    async fetchUserList() {
      try {
        const response = await listUser();
        this.userCount = response.total;
      } catch (error) {
        console.error('获取用户列表失败', error);
      }
    },
    async fetchViolationData() {
      try {
        const response = await getMonthlyViolationCounts(); // 获取响应数据
        if (response && response.data) {
          const currentMonthCount = response.data.currentMonthCount;
          const lastMonthCount = response.data.lastMonthCount;

          this.violationCount = currentMonthCount;
          this.violationPercentage = lastMonthCount > 0 ? ((currentMonthCount - lastMonthCount) / lastMonthCount * 100).toFixed(2) : 0;
        } else {
          console.error('响应数据结构不正确:', response);
        }
      } catch (error) {
        console.error('获取违规记录失败', error);
      }
    }
  },
};
</script>


<style scoped>
.container {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin: 20px auto;
  max-width: 1200px;
}

.header {
  background-color: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}

.metrics {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  gap: 15px;
}

.metric {
  flex: 1;
  text-align: center;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background-color: #f9f9f9;
}

.metric h2 {
  font-size: 1.25em;
  margin-bottom: 10px;
}

.metric p {
  font-size: 2em;
  color: #3498db;
}

.metric small {
  display: block;
  margin-top: 10px;
  color: #7f8c8d;
}

.charts {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  gap: 15px;
}

.chart {
  flex: 1;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.chart h3 {
  font-size: 1.2em;
  margin-bottom: 15px;
}

.chart-placeholder {
  height: 200px;
  background-color: #ecf0f1;
  border-radius: 5px;
  text-align: center;
  line-height: 200px;
  color: #bdc3c7;
  font-size: 1em;
}

.overview {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.overview h3 {
  margin-bottom: 15px;
}

.footer {
  margin-top: 30px;
  text-align: center;
  color: #7f8c8d;
  font-size: 0.9em;
}

@media (max-width: 768px) {

  .metrics,
  .charts {
    flex-direction: column;
  }

  .metric,
  .chart {
    width: 100%;
  }
}
</style>
